// 模拟服务器传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
// 获取div标签
let div = document.querySelector(".api-category");
// 需要拼接标签
let as = "";
apiTypeData.forEach(function (v) {
    let name = v.name;
    let keyword = v.keyword;
    let isNew = v.isnew;
    as += `<a href="#" class="${isNew ? 'on' : ''}"keyword="${keyword}">${name}</a>`;
})
// console.log(as);
// 将拼接好的标签加到页面上
div.innerHTML = as;
// 给div绑定点击事件
div.addEventListener("click", function (e) {
    // 判断时间是在谁身上发生的
    let a = e.target;
    if (a.nodeName.toLowerCase() === "a") {
        console.log(a.textContent);
        console.log(a.getAttribute("keywrod"));
        document.querySelector(".tips-title").textContent = a.textContent;
        document.querySelector(".kw").placeholder = a.getAttribute("keyword");
    }
})
// api分类选项框
// 模拟服务器数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
]
//  获取页面上div标签
let ul = document.querySelector(".list");
let li = "";
listDataArr.forEach(function ( v ) {
    li += ` <li>
    <p class="enterprise ${v.isSpecial ? "active" : "" }">企业专用</p>
    <a href="../html/apitwo.html">
        <img src="../images/${v.img}" alt="">
        <p class="auth">${v.name}</p>
        <p class="free ${v.price === "免费" ? "" : "on" }">${v.price}</p>
    </a>
    <a class="apply" href="#">申请数据</a>
</li> `
})
// console.log(li);
ul.innerHTML = li;


// 需要给 申请数据 的a标签添加点击事件
ul.addEventListener( "click" , function( e ){
    // 判断事件源是不是 a 标签
    if( e.target.className === "apply" ){
        console.log(  e.target );
        document.querySelector(".modal").style.display = "block";
    }
} )

// 需要给模态框添加点击事件，关闭模态框
document.querySelector(".modal").addEventListener( "click" ,function( e ){
    // 判断当前点击的是否是  里面的 对话框 ，阻止事件冒泡
    if( e.target.className === "modal" ){
    //     e.stopPropagation();
    // }
    // else{
        document.querySelector(".modal").style.display = "none";
    }
} );


// 登录切换
let login = document.querySelectorAll('.option a');
let goLogin = document.querySelectorAll('form>div');
let oldi = 0 ;
login.forEach( function( v , i ){
    v.addEventListener( 'click' , function(e){
        login[oldi].className = '';
        goLogin[oldi].classList.remove('on');
        e.target.className = 'on';
        goLogin[i].classList.add('on');
        oldi = i;
    } );
} );

// 清除按钮
// 图片显示
let imgs = document.querySelectorAll('.input img');
let inputs = document.querySelectorAll('.input input');
inputs.forEach( function( v , i ) {
    v.addEventListener( 'input' , function() {
        if( v.value != ''){
            imgs[i].classList.add('on');
        }else{
            imgs[i].classList.remove('on');
        };
    } );
} );
// 清除内容
imgs.forEach( function( v , i ){
    v.addEventListener( 'click' , function() {
        inputs[i].value = '';
        imgs[i].classList.remove('on');
    } );
} );
// 分页条
// var pagnation=$("#pagnation");
// $(document).on("keydown",function(event){
//     switch(event.keyCode){
//          case 37 : window.location.href = pagnation.find(".page-prev").attr("href");break;
//          case 39 : window.location.href = pagnation.find(".page-next").attr("href");break
//     }
// });
